/* * createTime: 2020/2/25 16:47 * description: 空数据提示组件 */

<template>
	<div class="empty-box" :style="{ 'margin-top': marginTop }">
		<div class="empty-img">
			<img :src="src" alt="" />
		</div>
		<p :style="{ 'margin-top': textMarginTop }">{{ emptyText }}</p>
	</div>
</template>
<script>
export default {
	name: 'Empty',
	props: {
		emptyText: {
			type: String,
			default: '当前暂无数据~'
		},
		offsetTop: {
			type: String,
			default: '30'
		},
		textOffsetTop: {
			type: String,
			default: '32'
		},
		src: {
			type: String,
			default: require('../assets/images/common/empty-goods.png')
		}
	},
	computed: {
		marginTop() {
			return this.offsetTop + 'px';
		},
		textMarginTop() {
			return '-' + this.textOffsetTop + 'px';
		}
	},
	data() {
		return {};
	},
	methods: {},
	created() {}
};
</script>

<style lang="scss" scoped>
.empty-box {
	height: 100%;
	width: 100%;
	flex: 1;
	background-size: 40%;
	font-size: $font24;
	line-height: 1;
	color: $text-black;
	@include flexBox(center, center, column);
	.empty-img {
		width: 60%;
		margin: 20px auto;
	}
	p {
		margin-top: -64px;
		color: #666666;
		text-align: center;
		display: block;
		width: 750px;
	}
}
</style>
